<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:360px;
				height:400px;
				border:1px solid red;
				margin:0 auto;
			}
			#box .top{
				height:60px;
				background: yellow;
			}
			#box .top div{
				width:120px;
				height:60px;
				background: black;
				color:white;
				font:bold 32px/60px "微软雅黑";
				text-align: center;
				float:left;
			}
			#box .top div.active{
				background: crimson;
			}
			#box .content{
				height:340px;
				position:relative;
			}
			#box .content div{
				position:absolute;
				top:0;
				left:0;
				height:340px;
				width:360px;
				background: chartreuse;
				text-align: center;
				line-height: 340px;
				font-size:148px;
				color:white;
				display: none;	
			}
			#box .content .red{
				background: red;
			}
			#box .content .blue{
				background: blue;
			}
			#box .content .green{
				background: green;
			}
			#box .content .active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="top">
				<div class="active">红色</div>
				<div>蓝色</div>
				<div>绿色</div>
			</div>
			<div class="content">
				<div class="red active">红色</div>
				<div class="blue">蓝色</div>
				<div class="green">绿色	</div>
			</div>
		</div>
		
		<script>
			window.onload = function(){
//				目的:获取要操作的元素。按钮和下面显隐的div
				var oBox = document.getElementById("box");
				var oTop = oBox.getElementsByClassName('top')[0];
				var btns = oTop.getElementsByTagName('div');
				
				var oContent = oBox.getElementsByClassName('content')[0];
				var oShows = oContent.getElementsByTagName('div');
				
				//循环绑定点击事件
				for(var i=0;i<btns.length;i++){
//					通过自定义属性,给每个按钮添加索引值
					btns[i].index = i;
					btns[i].onclick = function(){
						//按钮样式切换思路：先通过循环，全部变为黑色背景，当前（this）的变为红色背景
//						1,循环全变黑
						for(var j=0;j<btns.length;j++){
							btns[j].style.background='black';
						}
//						2.当前这个变红色
						this.style.background = 'red';
						
//						让和按钮索引对应的div显示.所以我要获得当前点击按钮的索引值.
//						1.通过循环让全部的div 隐藏
						for(var k=0;k<oShows.length;k++){
							oShows[k ].style.display = 'none';
						}
//						2.让对应的索引的div显示.索引this.index
						oShows[this.index].style.display = 'block';
						
					}
				}
							
			}
		</script>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
